<template>
  <div ww3 auto>
    <div class="feed-btn" flex>
      <el-button type="primary" @click="dialogForm"> 
        提交反馈
      </el-button>
    </div>

    <el-card class="box-card">
      <dl v-for="(item,index) in list" :key="index" flex flex-b flex-c fz-14 class="answer">
        <dt cur ellipsis @click="handle(item.feedbackId)">
          {{item.contents}}
        </dt>
        <dd flex flex-b flex-c>
          <span>{{item.type == 1 ? '待回复' : '已回复'}}</span>
          {{item.updateTime}}
          <span class="close-btn" @click="cmsFeedbackDelete(item.feedbackId)">删除</span>
        </dd>
      </dl>

      <!-- <dl flex flex-b flex-c fz-14 black>
        <dt cur ellipsis @click="handle">
          家暴也是广告纪录片常用素材，且这条素材拍摄手法很艺术
        </dt>
        <dd flex flex-b flex-c>
          <span>待处理</span>
          2021-07-04 09:39
          <span class="close-btn">删除</span>
        </dd>
      </dl> -->
    </el-card>

    <div flex ww1 style="justify-content: center">
      <el-pagination background layout="prev, pager, next" :page-size="pageSize" :total="total" @current-change="currentChange">
      </el-pagination>
    </div>

    <feedbackWork ref="feedbackWork"/>
  </div>
</template>

<script>
import feedbackWork from "@/components/dialog/FeedbackWork"
import $http from "@/api/feedback/feedback"
export default {
  name: "Feedback",
  components: {
    feedbackWork
  },
  data() {
    return {
      dialogFormVisible: false,
      fileList: [],
      pageSize: 8,
      pageNum: 1,
      list: [],
      total: 1
    };
  },
  mounted() {
    this.getCmsFeedback();
  },

  methods: {
    /**
     * 删除反馈
     */
    cmsFeedbackDelete(feedbackId) {
      let that = this;
      this.$confirm('确定删除该条数据吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'success',
        callback: action => {
          if (action === 'confirm') {
            let data = {
              feedbackId: feedbackId
            };
            $http.cmsFeedbackDelete(data).then(res => {
              console.log(res);
              if(res.code == 0) {
                this.$message('删除成功！');
                this.getCmsFeedback();
              }

            })
          }
          else {
            console.log('按下 取消')
          }
        }
      })
      
    },
    //分页事件
    currentChange(val) {
      this.pageNum = val;
      this.getCmsFeedback();
    },
    /**
     * 获取反馈列表
     */
    getCmsFeedback() {
      let that = this;
      let data = {
        userId: sessionStorage.getItem('userId'),
        pageSize: this.pageSize,
        pageNum: this.pageNum
      };
      $http.getCmsFeedback(data).then(res => {
        that.list = res.rows;
        that.total = res.total;
        console.log(that.list);
      })
    },
    /**
     * 显示弹框
     */
    dialogForm() {
      this.$refs.feedbackWork.init();
    }, 
    // 图片上传相关
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${ file.name }？`);
    },
    close() {
      this.form.radio = "";
    },
    handle(id) {
      this.$router.push({
        name: "ChatView",
        params: {
          id: id,
        },
      });
    },
  },
};
</script>

<style scoped>
.tip {
  line-height: 32px;
}
.close-btn {
  color: red;
  cursor: pointer;
}
.close-btn:hover {
  font-weight: 600;
}
.show >>> .el-dialog {
  min-width: 680px;
}
.box-card {
  margin: 2% auto;
  min-height: 60vh;
}
.box-card dl {
  width: 80%;
  margin: 0 auto;
  height: 48px;
  border-bottom: 1px solid #ebeef5;
  color: #303133;
  padding: 3% 1%;
}

.box-card dl:hover {
  background: #f6f9fc;
}

.box-card dt {
  flex: 0 0 60%;
}
.box-card dd {
  flex: 1;
}
.box-card dl.answer {
  color: var(--green);
}
</style>
